<template>
  <div class="parent" :loading="loading">
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  loading: false
});
const { option, loading } = toRefs(state);
const getoptions = () => {
  loading.value = true;
  queryConsumeChartForDay({ dictKey: "WWT02", day: 7 }).then((response: any) => {
    console.log(response);
    loading.value = false;
    isShowEcharts.value = true;
    const series = response.panelList.map(item => {
      return {
        data: item.details.map(item => (item.value != null ? item.value : 0)),
        type: "bar",
        name: item.title,
        label: {
          show: false,
          color: props.type == "dark" ? "white" : "black"
        },
        emphasis: {
          focus: "series"
        }
      };
    });
    option.value = {
      backgroundColor: props.type == "dark" ? "#001e3b" : "",
      grid: {
        left: "30px",
        top: "40px",
        right: "10px",
        bottom: "10px",
        containLabel: true
      },
      legend: {
        x: "right",
        type: "scroll",
        width: "75%"
      },
      tooltip: {
        confine: true
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        data: response.xaxis
      },
      yAxis: {
        name: "耗量单位（t）",
        type: "value"
      },
      series: series
    };
  });
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
